<template>
	<view>
		<!-- #ifdef H5 -->
		<view class="my-tabbar">
			<view class="item" :class="{active: currentRoute === item.pagePath}" v-for="(item, index) in list"
				:key="index" @tap="to(item.pagePath)">
				<image :src="`/${item.selectedIconPath}`"></image>
				<image :src="`/${item.iconPath}`"></image>
				<text>{{ item.text }}</text>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listMap: {
					1: {
						"pagePath": "pages/home/index",
						"iconPath": "static/image/tab-008.png",
						"selectedIconPath": "static/image/tab-003.png",
						"text": "首页"
					},
					2: {
						"pagePath": "pages/market/index",
						"iconPath": "static/image/tab-002.png",
						"selectedIconPath": "static/image/tab-006.png",
						"text": "市场"
					},
					3: {
						"pagePath": "pages/my/my-order",
						"iconPath": "static/image/tab-001.png",
						"selectedIconPath": "static/image/tab-007.png",
						"text": "藏馆"
					},
					4: {
						"pagePath": "pages/my/index",
						"iconPath": "static/image/tab-004.png",
						"selectedIconPath": "static/image/tab-005.png",
						"text": "我的"
					}
				},
				list: [],
				currentRoute: ''
			}
		},
		onLoad() {},
		created() {
			this.init();
		},
		methods: {
			init() {
				// 获取当前页面路径
				let curPage = getCurrentPages();
				this.currentRoute = curPage[curPage.length - 1].route;
				this.$http('api/newapi/buttonList', 'GET').then((res) => {
					this.list = res.map(item => this.listMap[item.id]).filter(item => !!item);
					uni.setStorageSync('tabbar_list', this.list);
				})
				// const list = uni.getStorageSync('tabbar_list');
				// if (list) {
				//   this.list = list;
				// } else {
				//   this.$http('api/newapi/buttonList', 'GET').then((res) => {
				//     this.list = res.map(item => this.listMap[item.id]).filter(item => !!item);
				//     uni.setStorageSync('tabbar_list', this.list);
				//   })
				// }
			},
			to(path) {
				uni.switchTab({
					url: `/${path}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.my-tabbar {
		width: 100%;
		height: var(--window-bottom);
		border-top: 1px solid rgba(0, 0, 0, 0.33);
		position: fixed;
		left: 0;
		bottom: 0;
		background: #000;
		z-index: 999;
		display: flex;

		.item {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			image {
				width: 45rpx;
				height: 45rpx;
			}

			& image:nth-child(2),
			&.active image:first-child {
				display: block;
			}

			& image:first-child,
			&.active image:nth-child(2) {
				display: none;
			}

			text {
				// margin-top: 3px;
				font-size: 11px;
				color: #BFBFBF;
			}

			&.active text {
				color: #BA56FA;
			}
		}
	}
</style>
